import React, { useState, useCallback } from 'react';
import { inject } from 'mobx-react';
import { useHistory } from 'react-router';

interface IProps {
  TodoStore: { list: [], add: (text: {}) => void }
}

const AddTodo: React.FC<IProps> = (props: IProps) => {
  const { TodoStore: store } = props;
  const history = useHistory();

  const [text, setText] = useState('');
  const onChangeTextInput = useCallback((e) => {
    const newText = e.target.value;
    setText(newText);
  }, []);

  const handleAdd = () => {
    store.add(text);
    setText('');
  }

  const handleBack = () => {
    history.push('/list');
  }

  return (
    <div>
      <input type="text" value={text} onChange={onChangeTextInput} />
      <div style={{marginTop: '12px'}}>
        <button
          onClick={handleAdd}
          style={{marginRight: '12px'}}
        >添加</button>
        <button
          onClick={handleBack}
        >返回</button>
      </div>
    </div>
  )
}

export default inject('TodoStore')(AddTodo);
